<template>
	<z-container title="设置">
		<view class="ss-p-32">
			<view class="bg-white br-24 ss-p-x-40">
				<!-- #ifdef MP -->
				<button class="ss-reset-button ss-w-100" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="ss-p-y-32 ss-flex ss-row-between ss-w-100">
						<view class="font-w-500 fs-28">头像</view>
						<z-avatar :src="form.avatar" size="84rpx"></z-avatar>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<view @tap="chooseAvatarImg" class="ss-p-y-32 ss-flex ss-row-between ss-w-100">
					<view class="font-w-500 fs-28">头像</view>
					<z-avatar :src="form.avatar" size="84rpx"></z-avatar>
				</view>
				<!-- #endif -->
				<uv-line></uv-line>
				<view class="ss-p-y-32 ss-flex ss-row-between">
					<view class="font-w-500 fs-28">昵称</view>
					<!-- <view class="fc-dark6">张哥</view> -->
					<input type="nickname" v-model="form.nickname" class="ss-text-right"  />
				</view>
			</view>
		</view>
		<z-bottom>
			<view class="ss-p-x-32 ss-p-y-16">
				<z-button @tap="submit" :disabled="!form.nickname || !form.avatar" >保存</z-button>
			</view>
		</z-bottom>
	</z-container>
</template>

<script setup>
	import { watchEffect } from "vue";
	import sheep from "@/sheep"
	const form = reactive({
		nickname: '',
		avatar: ''
	})
	const userInfo = computed(() => sheep.$store('user').userInfo)
	watchEffect(() => {
		form.nickname = userInfo.value.nickname
		form.avatar = userInfo.value.avatar
	})
	function onChooseAvatar(e) {
	  const tempUrl = e.detail.avatarUrl || '';
	  uploadAvatar(tempUrl);
	}
	function chooseAvatarImg(){
		sheep.$helper.chooseImage({}, res => {
			form.avatar = res?.url
		})
	}
	async function uploadAvatar(tempUrl) {
	  if (!tempUrl) return;
	  let { url } = await sheep.$helper.uploadFileImg(tempUrl);
	  console.log(url,'小程序上传');
	  form.avatar = url;
	}
	function submit(){
		sheep.$store('user').editUserInfo(form)
	}
</script>

<style>

</style>
